<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 布局练习</title>
    <link rel="stylesheet" href="../06/style.css">

</head>

<body>
    <header>
        <h1>
            css 布局练习
        </h1>
    </header>
    <main>
        <section>
            <h2>Flexbox</h2>
            <p>Flex box布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺寸不固定的时候更能表现出它的优势。它能够自动识别子元素的尺寸，从而为盒装模型提供更高的灵活性。</p>
            <p>动画剧集 正序</p>
            <div class="flexbox">
                <p>第一话-太宰、中也，十五岁</p>
                <p>第二话-荒神在此</p>
                <p>第三话-钻石只能用钻石来打磨</p>
                <p>第四话-咎戒乃神之职责</p>
                <p>第五话-Slap the Stick & Addict</p>
                <p>第六话-其一 黑路丽斯！</p>
                <p>第七话-菲茨杰拉德·重振雄风</p>
            </div>
            <p>动画剧集 倒序</p>
            <div class="flexbox1">
                <p>第一话-太宰、中也，十五岁</p>
                <p>第二话-荒神在此</p>
                <p>第三话-钻石只能用钻石来打磨</p>
                <p>第四话-咎戒乃神之职责</p>
                <p>第五话-Slap the Stick & Addict</p>
                <p>第六话-其一 黑路丽斯！</p>
                <p>第七话-菲茨杰拉德·重振雄风</p>
            </div>
            <p>wrap换行 justify如何对齐</p>
            <div class="flexbox01">
                <p>第一话-太宰、中也，十五岁</p>
                <p>第二话-荒神在此</p>
                <p>第三话-钻石只能用钻石来打磨</p>
                <p>第四话-咎戒乃神之职责</p>
                <p>第五话-Slap the Stick & Addict 中岛敦与芥川龙之介等人与盗贼团头目“费奥多尔·D”的钞能力战斗</p>
                <p>第六话-其一 黑路丽斯！</p>
                <p>第七话-菲茨杰拉德·重振雄风</p>
            </div>
            <p>row</p>
            <div class="flexbox">
                <p>喜欢夜晚心浸润在花香里</p>
                <p>对着莫名痴迷的事物而着迷</p>
                <p>简简单单的满足</p>
                <p>还有手中的一抹阳光</p>
            </div>
            <p>row-reverse</p>
            <div class="flexbox1">
                <p>喜欢夜晚心浸润在花香里</p>
                <p>对着莫名痴迷的事物而着迷</p>
                <p>简简单单的满足</p>
                <p>还有手中的一抹阳光</p>
            </div>
            <p>column</p>
            <div class="flexbox2">
                <p>早上醒来的时候</p>
                <p>我看到田野，坟墓，枯树枝</p>
                <p>半死不活的春雪</p>
                <p>以及零下负四摄氏度的灰色</p>
            </div>
            <p>column-reverse</p>
            <div class="flexbox3">
                <p>早上醒来的时候</p>
                <p>我看到田野，坟墓，枯树枝</p>
                <p>半死不活的春雪</p>
                <p>以及零下负四摄氏度的灰色</p>
            </div>
            <p>wrap换行</p>
            <div class="flexbox4">
                <p>第一话-太宰、中也，十五岁</p>
                <p>第二话-荒神在此</p>
                <p>第三话-钻石只能用钻石来打磨</p>
                <p>第四话-咎戒乃神之职责</p>
                <p>第五话-Slap the Stick & Addict </p>
                <p>第六话-其一 黑路丽斯！</p>
                <p>第七话-菲茨杰拉德·重振雄风</p>
            </div>
            <p>wrap-reverse</p>
            <div class="flexbox5">
                <p>第一话-太宰、中也，十五岁</p>
                <p>第二话-荒神在此</p>
                <p>第三话-钻石只能用钻石来打磨</p>
                <p>第四话-咎戒乃神之职责</p>
                <p>第五话-Slap the Stick & Addict</p>
                <p>第六话-其一 黑路丽斯！</p>
                <p>第七话-菲茨杰拉德·重振雄风</p>
            </div>
            <p>align-items: flex-start</p>
            <div class="flexbox6">
                <p class="box1">1</p>
                <p class="box2">2</p>
                <p class="box3">3</p>
            </div>
            <p>align-items: center</p>
            <div class="flexbox7">
                <p class="box1">1</p>
                <p class="box2">2</p>
                <p class="box3">3</p>
            </div>
            <p>align-items:baseline</p>
            <div class="flexbox8">
                <p class="box1">1</p>
                <p class="box2">2</p>
                <p class="box3">3</p>
            </div>


        </section>
        <section>
            <h2>column </h2>
            <p>分栏布局提供了一种将内容按列排列的方法，就像在报纸上看到的那样。但是创建的列不能单独设置样式，无法使一列比其他列大，或更改单个列的背景或文本颜色。</p>
            <div class="column">
                <p>一</p>
                <p>岩井俊二曾说过，他拍的是那些被人所忽略的事。可正是这些细枝末节，一点点构成了今天的我们。</p>
                <p>博子和女生藤井树，在旁人看来，都是不愿意和过去好好道别的人。心怀伤痛的人，好像那只被冻在冰块里的蜻蜓，外表看起来并无损伤，其实早已经死了。
                </p>
                <p class="column-span">可那只蜻蜓，到底是死去了？还是被永恒地保留在时光里了呢？</p>
                <p>二</p>
                <p>最后藤井树收获了一份迟来的心意，一份早就该被接受的安慰，却像恒星的光芒，晚了那么一点才抵达。可毕竟是美丽的星光啊，足以照亮黑暗了。
                </p>
                <p>三</p>
                <p>你好吗？我很好。
                </p>
                <p class="break-avoid">瞬间即永恒。过去从不曾过去，这是上天对那些念念不忘的人的一种馈赠。</p>
            </div>
        </section>
        <section>
            <h2>网格布局grid</h2>
            <p>网格（Grid）是水平线和垂直线的集合，使用网格排版，可使元素在页面之间移动时不会跳动或改变宽度，从而在网站上提供更高的一致性。要定义网格，需要将display的值设为grid。</p>
            <div class="grid">
                <p>1温柔一刀</p>
                <p>2奶酪陷阱</p>
                <p>3祭四之夜</p>
                <p>4白夜霓虹</p>
                <p>5电竞少女</p>
            </div>
        </section>
        <section>
            <h2>网格布局</h2>
            <div class="container">
                <header class="header1">这里放置导航条 </header>
                <article>
                    <h1>文豪野犬</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio maiores commodi, ipsa
                        possimus
                        voluptatibus perspiciatis, maxime exercitationem id eveniet beatae architecto, eos iure
                        recusandae
                        reiciendis numquam sed reprehenderit rem dolores.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia
                        ducimus!
                        Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus?
                        Est
                        dignissimos nam eligendi.
                        Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti
                        molestiae
                        tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores
                        voluptatum
                        error reiciendis! Nemo.
                        Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa,
                        voluptas
                        illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                        adipisci ab quam officiis. Animi, quam deleniti.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia
                        ducimus!
                        Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus?
                        Est
                        dignissimos nam eligendi.
                        Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti
                        molestiae
                        tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores
                        voluptatum
                        error reiciendis! Nemo.
                        Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa,
                        voluptas
                        illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                        adipisci ab quam officiis. Animi, quam deleniti.</p>
                </article>
                <aside>
                    <h2>侧边栏</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos odio, enim iure ratione sed
                        perspiciatis
                        veniam, consequuntur eum illum voluptas tenetur ducimus. Optio, ducimus cumque maxime dolorem
                        veniam est
                        ipsam.</p>
                    <p><img src="../public/images/-5c75b2c941d73f6c.gif" alt="哒宰桑" width="240px" height="140px"></p>
                </aside>
                <footer class="footer1">这里放置版权信息等内容</footer>
            </div>
        </section>
    </main>
    <footer> <span>|人间失智|</span><span>|css布局|</span><span>|修改于2020年4月13日|</span></footer>


</body>

</html>